<template>
  <div class="home">
    <div class="body">
      <div class="content">
        <a-list
          item-layout="vertical"
          size="large"
          :pagination="false"
          :data-source="listData"
        >
          <template #renderItem="{ item }">
            <a-list-item key="item.title">
              <template #actions>
                <span id="collection" @click="collection(item)">
                  <StarOutlined style="margin-right: 2px" />
                  {{ item.collectionNum }}
                </span>
                <span id="likes" @click="like(item)">
                  <LikeOutlined style="margin-right: 2px" />
                  {{ item.likeNum }}
                </span>
                <span>
                  <MessageOutlined style="margin-right: 2px" />
                  {{ item.commentNum }}
                </span>
              </template>

              <a-list-item-meta id="topInfo">
                <template #title>
                  <div>
                    <span>{{ item.author }}</span>
                    <div style="font-size: 8px">{{ item.showtime }}</div>
                  </div>
                </template>
                <template #avatar>
                  <div>
                    <a-avatar :src="item.imgHead" :size="48" />
                  </div>
                </template>
              </a-list-item-meta>
              <span id="dycontent" @click="gotoContent(item)">
                <div v-html="item.content"></div>
                <div id="picstyle">
                  <span
                    v-for="(pics, index) in item.picList"
                    :key="index"
                    style="margin: 5px 10px 5px 0"
                  >
                    <a-image :width="240" :src="pics.url" />
                  </span>
                </div>
              </span>
            </a-list-item>
          </template>
        </a-list>
      </div>
      <div class="sider">
        <a-collapse
          v-model:activeKey="activeKey"
          :bordered="false"
          style="background: #edf9ff"
        >
          <a-collapse-panel
            key="1"
            header="星球广场"
            style="background: #edf9ff"
          >
            <p>所有人</p>
            <p>仅看关注</p>
            <p>仅看粉丝</p>
          </a-collapse-panel>
          <a-collapse-panel key="2" header="私人小圈" :disabled="false">
            <p>摄影小圈</p>
            <p>篮球小圈</p>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import {
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref } from "vue";
import { message } from "ant-design-vue";
import { doLike, doCollection, doHappyRoot } from "../../api/dynamic";
import { useRouter } from "vue-router";

export default defineComponent({
  components: {
    StarOutlined,
    LikeOutlined,
    MessageOutlined,
  },

  setup() {
    const activeKey = ref([1]);
    const listData = ref([]);
    const router = useRouter();

    doHappyRoot({
      url: "/dynamic/doHappyRoot",
      success: (res) => {
        // console.log(res.data);
        // message.info(res.data);
        for (let i = 0; i < res.data.length; i++) {
          listData.value.push({
            did: res.data[i].did,
            showtime: res.data[i].addTime,
            author: res.data[i].uname,
            imgHead: "http://localhost:3000/" + res.data[i].imgHead,
            content: res.data[i].content,
            likeNum: res.data[i].likeNum,
            collectionNum: res.data[i].collectionNum,
            commentNum: res.data[i].commentNum,
            picList: res.data[i].picList,
          });
        }
      },
      err: (err) => {
        console.log(err);
      },
    });

    const gotoContent = (item) => {
      sessionStorage.setItem("DID", item.did);
      router.push({ path: "/contentPage2" });
    };

    const like = (item) => {
      doLike({
        url: "/dynamic/doLike",
        did: item.did,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
      // document.getElementById("likes").style.color = "#1890ff";
    };

    const collection = (item) => {
      // console.log(item.aid);
      doCollection({
        url: "/dynamic/doCollection",
        did: item.did,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
      // document.getElementById("likes").style.color = "#1890ff";
    };

    const pagination = {
      onChange: (page) => {
        console.log(page);
      },
      pageSize: 3,
    };

    return {
      listData,
      pagination,
      moment,
      activeKey,
      like,
      collection,
      gotoContent,
    };
  },
});
</script>

<style scoped>
.home {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f1fffd;
}
.body {
  min-height: 630px;
  width: 66%;
  margin: 0 17% 0 17%;
  padding-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.content {
  height: auto;
  width: 70%;
  padding: 20px 20px 0 20px;
  margin: 0;
  min-width: 530px;
  background: #edf9ff;
}
.sider {
  height: auto;
  width: 30%;
  padding: 20px 20px 0 20px;
  margin: 0 0 0 10px;
  min-width: 200px;
  background: #edf9ff;
}
#dycontent {
  color: black;
}
#dycontent :hover {
  color: #005177;
  cursor: pointer;
}
#picstyle {
  max-height: 320px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
</style>